<template>
    <div>
        <el-button @click="visible=true" type="text">添加链接</el-button>
        <el-dialog title="添加链接" :visible.sync="visible" @close="close">
            <el-form :model="form" ref="appendLinkForm">
                <el-form-item label="链接名称" prop="name" :rules="[{required:true,trigger:'blur',message:'请填写文本'}]">
                    <el-input v-model="form.name"/>
                </el-form-item>
                <el-form-item label="链接网址" prop="href" :rules="[{required:true,trigger:'blur',message:'请填写网址'}]">
                    <el-input v-model="form.href"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "report_email_append_link",
        data() {
            return {
                visible: false,
                form: {
                    name: '',
                    href: '',
                }
            }
        },
        methods: {
            close() {
                this.visible = false;
            },
            ok() {
                this.$refs.appendLinkForm.validate(valid => {
                    if (!valid)
                        return;
                    this.$emit('add', this.form);
                    this.close();
                });
            },
        },
        watch: {
            visible(val) {
                this.dialog = val;
            },
        }
    }
</script>

<style scoped>

</style>